<template>
    <div>
        <h2>表格的基本使用</h2>
        <!--
           :data="tableData"   绑定表格中需要渲染的数据
           prop="date"       该列需要渲染的对象中的属性名
           label="日期"      列名
           width="180"       列宽
           stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用
           默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
           height="250"  设置固定表头
        -->
        <div id="headTool">
            <el-button type="success" size="small" @click="addData">新增</el-button>
            <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
        </div>
        <el-table
                :data="tableData"
                :stripe="true"
                :border="true"
                height="250"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <!--         设置checkbox列-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-popconfirm  title="确认删除当前行数据吗？" @confirm="handleDelete(scope.row)" >
                        <el-button  slot="reference" size="mini" type="danger">删除 </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--        添加的模态窗-->
        <el-dialog title="新增" :visible.sync="dialogFormVisible" @close="clearData">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="活动形式" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "TableView",
    data() {
        return {
            dialogFormVisible: false,  //控制模态窗显示还是隐藏
            formLabelWidth: 100,
            form: {
                name: '',
                password: '',
                desc: ''
            },
            currentPage: 1,
            pageSize: 10,
            total: 400,
            pageSizes: [10, 20, 30, 40],
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 3,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 4,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: [],
            rules: {
                name: [ //  prop
                    //   required  必填  message: 提示信息  trigger: 校验规则触发的时机
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    // min 字符串的最小长度   max  最大长度  trigger: 校验规则触发的时机
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                desc: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请填写密码', trigger: 'blur'},
                    {min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'}
                ]
            }
        }

    },
    methods: {
        //  复选回调函数
        handleSelectionChange(val) {  //  val 选中行数据     可以处理为只含有id属性值  便于后续批量删除
            this.multipleSelection = val.map(line => line.id);
        },
        // 编辑回调
        handleEdit(row) {
            alert(JSON.stringify(row))
        },
        // 删除回调
        handleDelete(row) {
            alert(JSON.stringify(row.id))
            // 发送异步请求   id    vue.js  ->   axios      jquery.js  $.ajax({})
        },
        //每页显示条数改变时 回调该函数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            // 发送异步请求   currentPage   size
        },
        //页码改变时 回调该函数
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            // 发送异步请求   currentPage   size
        },
        // 新增回调
        addData() {
            //  显示模态窗口
            console.log("add")
            this.dialogFormVisible = true
        },
        // 批量删除回调
        batchDelete() {
            // 弹出确认框 避免用户误操作
            console.log("delete")
            // 确认提示
            this.$confirm('确认删除选中行数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送异步请求
                console.log("删除的异步请求已发送")
            }).catch(() => {
                console.log("删除的异步请求已取消")
            });
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                // 校验通过  valid  true   否则  false
                if (valid) {
                    console.log('submit!', JSON.stringify(this.form));
                    //  发送异步请求    ok
                    this.dialogFormVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        clearData() { //  模态窗关闭时的回调
            // 清空校验规则  rules
            this.$refs.form.clearValidate()
            // 清空表单数据
            this.form = {
                name: '',
                password: '',
                desc: ''
            }
        }


    }

}
</script>

<style scoped>

.block {
    margin-top: 20px;
}

#headTool {
    margin-bottom: 10px;
}
</style>